<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/scrollBar.css">

    <title>Xow</title>

    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
            color: rgb(139, 142, 145)
        }

        #app {
            padding: 24px 0px 24px 24px;
            font-size: 14px;
            display: flex;
            flex-direction: column;
        }

        .returnItem {
            height: 40px;
        }

        .detailInfo {
            padding-left: 200px;
            display: flex;
            flex-direction: row;
            align-items: center;
            border: 3px solid rgba(0, 0, 0, 0.2);
            padding: 18px;
            margin-right: 24px;
            border-radius: 10px;
            box-shadow: 3px 3px 3px #aaaaaa;
        }

        .Info {
            width: 350px;
            height: 350px;
            display: flex;
            flex-direction: column;
            font-size: 18px;
            color: #000;
            line-height: 50px;
        }

        .photo {
            width: 350px;
            height: 350px;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            margin-right: 60px;
            display: flex;
        }

        .image {
            max-width: 350px;
            max-height: 350px;
            margin: 0px auto;
        }

        .desc {
            line-height: normal;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="returnItem">
        <div>
            <a href="item.html" style="color: #000;">返回</a>
        </div>
    </div>
    <div class="detailInfo">
        <div class="photo">
            <img :src="imageUrl()" alt="" class="image">
        </div>
        <div class="Info">
            <div class="title">
                商品名称: {{item_info.item_name}}
            </div>
            <div class="price">
                价格:{{item_info.item_price}}元
            </div>
            <div class="label">
                标签:{{item_info.item_label}}
            </div>
            <div class="desc">
                商品详情: {{item_info.item_desc}}
            </div>
            <div style="width: 100%;text-align: center;">
                <button v-if="starState==0" type="button" class="btn btn-outline-secondary" style="width:100px" @click="changeStar()">
                    <i class="fa fa-star-o" aria-hidden="true"></i>
                    收藏
                </button>
                <button v-if="starState==1" type="button" class="btn btn-outline-secondary" style="width:150px" @click="changeStar()">
                    <i class="fa fa-star" aria-hidden="true"></i>
                    取消收藏
                </button>
            </div>

        </div>
    </div>
</div>

<!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
<script src="../js/jquery-3.6.0.slim.min.js"></script>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/vue.global.js"></script>
<!-- <script src="https://unpkg.com/vue"></script> -->
<script src="../js/axios.min.js"></script>
<script src="../js/requset.js"></script>
<script src="../layer/layer.js"></script>

<script>
    const app = {
        data() {
            return {
                item_id: '',
                item_info: {},
                starState: 0, //收藏状态,默认未收藏
            }
        },
        methods: {
            changeStar() {
                let star = this.starState == 1 ? 0 : 1;
                request.post("star/changeStar", {
                    u_id: 1,
                    item_id: this.item_id,
                    star
                }).then(res => {
                    console.log(res);
                    if (res.data.success)
                        this.starState = star

                })
            },
            imageUrl() {
                return "http://localhost:8080/xjw_war_exploded/avatar?filename=" + this.item_info.item_image;
            },
            getItemID() {
                let url = location.search; //获取url中"?"符后的字串
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                }
                this.item_id = theRequest.item_id
                console.log(this.item_id);
            },
            getItemInfo() {
                request
                    .post('/item/getItem', {
                        item_id: this.item_id
                    })
                    .then((res) => {
                        layer.close(this.loadIdx)
                        if (!res.data.success) {
                            layer.msg(res.data.message, {
                                icon: 2,
                                time: 1500,
                            })
                        } else {
                            console.log(res);
                            this.item_info = res.data.data
                        }
                    })
                    .catch((err) => {
                        layer.close(this.loadIdx)
                        layer.msg('系统错误', {
                            icon: 2,
                            time: 1500,
                        })
                    })
            },
            getStarState() {
                request.post("star/getStarByItemId", {
                    item_id: this.item_id,
                    u_id: 1
                }).then(res => {
                    console.log(res);
                    this.starState = res.data.data
                })
            }
        },
        created() {
            this.getItemID();
            this.getItemInfo();
            this.getStarState();

        }
    };
    Vue.createApp(app).mount('#app')
</script>
</body>

</html>